<template>
    <div>
        <div class="title-wrapper">
            <div class="title">
                <div>
                    <span class="back" @click="back">
                        <Icon type="ios-arrow-back" size="22"/>
                        <span>返回</span>
                    </span>
                    <ButtonGroup>
                        <template v-for="item in quarterList">
                            <Button :key="item.name" v-if="item.status==1" type="primary">
                                {{item.name}}
                            </Button>
                            <Button :key="item.name" v-else @click="active(item)">
                                {{item.name}}
                            </Button>
                        </template>
                    </ButtonGroup>
                </div>
                <Breadcrumb style="color: black">
                    <BreadcrumbItem>{{user.nickName}}</BreadcrumbItem>
                </Breadcrumb>
                <div>
                    <Button type="primary" @click="add" style="margin-right: 10px">添加</Button>
                    <Button v-if="selectIds.length==0" disabled @click="remove()">删除</Button>
                    <Button v-else type="error" @click="remove()">删除</Button>
                </div>
            </div>
        </div>
        <Table border :columns="columns" :data="tableData" @on-selection-change="changeSelect">
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 10px" @click="edit(row)">编辑</Button>
                <Button type="success" size="small" style="margin-right: 10px" @click="clock(row)">考勤</Button>
            </template>
        </Table>
        <teaching-form :teaching-modal="teachingModal" :modify="modify"></teaching-form>
    </div>
</template>

<script>
    import TeachingForm from './TeachingForm'
    import {quarterGetAll, teachingQuery, teachingRemoveByIds} from "../request/api"

    export default {
        name: "Teaching",
        components: {
            TeachingForm
        },
        data() {
            return {
                selectIds: [],
                quarterName: '',
                quarterList: [],
                teachingModal: false,
                modify: '',
                user: this.$route.query,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: "周次",
                        key: 'week'
                    }, {
                        title: "节次",
                        key: 'time'
                    }, {
                        title: "教室",
                        key: 'room'
                    }, {
                        title: "年级",
                        key: 'grade'
                    }, {
                        title: "班型",
                        key: 'type'
                    }, {
                        title: "学生",
                        key: 'student'
                    }, {
                        title: 'Action',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                tableData: [
                    {
                        week: '周一',
                        time: '8:00-10:00',
                        student: '张三,李四'
                    }
                ]
            }
        },
        created() {
            this.getQuarterList();
        },
        methods: {
            changeSelect(e) {
                console.log('e', e)
                this.selectIds = [];
                e.forEach(
                    item => this.selectIds.push(item.id)
                );
                console.log("ids", this.selectIds);
            },
            active(item) {
                this.quarterList.forEach(btn => {
                    if (btn.name == item.name) {
                        btn.status = 1;
                        this.quarterName = item.name;
                    } else {
                        btn.status = 0
                    }
                })
                this.teachingList();
            },
            back() {
                this.$router.back(-1);
            },
            teachingList() {
                teachingQuery({
                    userId: this.user.id,
                    quarter: this.quarterName
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            add() {
                this.teachingModal = true;
                this.modify = {
                    id: '',
                    quarter: this.quarterName,
                    userId: this.user.id,
                    week: '',
                    time: '',
                    student: '',
                }
            },
            edit(row) {
                this.teachingModal = true;
                this.modify = row;
                this.modify.userId = this.user.id;
                this.modify.quarter = this.quarterName;
            },
            cancelTeachingForm() {
                this.teachingModal = false;
            },
            remove() {
                this.$Modal.confirm({
                    title: '确认删除',
                    onOk: () => {
                        teachingRemoveByIds(this.selectIds).then((res) => {
                            if (res.code == 200) {
                                this.$Message.success('删除成功')
                                this.teachingList();
                            } else {
                                this.$Message.error(res.msg)
                            }
                        })
                    }
                })
            },
            clock(row) {
                let teaching = {
                    ...this.user,
                    teachingId: row.id
                }
                this.$router.push({name: 'clock', query: teaching})
            },
            getQuarterList() {
                quarterGetAll().then((res) => {
                    console.log(res);
                    this.quarterList = res.data;
                    res.data.forEach(item => {
                        if (item.status == 1) {
                            this.quarterName = item.name;
                            this.teachingList();
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        align-items: center;
        height: 46px;
        justify-content: space-between;
    }

    .back {
        color: blue;
        margin-right: 30px;
    }

</style>
